<template>
    <div style="width: 100% ;height: 95%;">
        <el-row>
            <el-col class="newButton">
                <el-button type="primary" round
                    @click="dialogFormVisible_new = true; updateform.image = ''">新建</el-button>



                <!-- 删除表单 -->



                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <span>您确认要删除该用户吗</span>
                    <span slot="footer" class="dialog-footer-delete">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false; deleteUser();">确 定</el-button>
                    </span>
                </el-dialog>



                <!-- 新建表单 -->



                <el-dialog title="新建成员" :visible.sync="dialogFormVisible_new">
                    <!-- 表单 -->
                    <el-form :model="updateform" ref="updateform" label-width="80px" :rules="rules">
                        <el-row>
                            <el-col>
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="updateform.username" autocomplete="off"
                                        style="width: 90%;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="updateform.name" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="性别" prop="gender">
                                    <el-select v-model="updateform.gender" placeholder="请选择性别">
                                        <el-option label="男" value="0"></el-option>
                                        <el-option label="女" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="updateform.email" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="邮编" prop="emailcode">
                                    <el-input v-model="updateform.emailcode" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="省份" prop="province">
                                    <!-- <el-input v-model="updateform.province" autocomplete="off"></el-input> -->
                                    <el-select v-model="updateform.province" clearable size="small" placeholder="请选择省"
                                        @change="provinceChange($event)">
                                        <el-option v-for="item in provinceList" :key="item.name" :label="item.name"
                                            :value="item.name" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="地区" prop="area">
                                    <!-- <el-input v-model="updateform.area" autocomplete="off"></el-input> -->
                                    <el-select v-model="updateform.area" clearable size="small" placeholder="请选择市">
                                        <el-option v-for="item in areaList" :key="item.name" :label="item.name"
                                            :value="item.name" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="生日" prop="birthday">
                                    <el-date-picker v-model="updateform.birthday" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="头像" prop="avatar">
                                    <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                        <img v-if="updateform.image" :src="updateform.image" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible_new = false">取 消</el-button>
                        <el-button type="primary"
                            @click="newUser('updateform'); dialogFormVisible_new = false;">确定</el-button>
                    </div>
                </el-dialog>


                <!-- 更新表单 -->



                <el-dialog title="信息修改" :visible.sync="dialogFormVisible_update">

                    <!-- 表单 -->
                    <el-form :model="changeform" ref="changeform" label-width="80px" :rules="rules">
                        <el-row>
                            <el-col>
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="changeform.username" autocomplete="off"
                                        style="width: 90%;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="changeform.name" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="性别" prop="gender">
                                    <el-select v-model="changeform.gender" placeholder="请选择性别">
                                        <el-option label="男" value="0"></el-option>
                                        <el-option label="女" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="changeform.email" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="邮编" prop="emailcode">
                                    <el-input v-model="changeform.emailcode" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="省份" prop="province">
                                    <!--<el-input v-model="changeform.province" autocomplete="off"></el-input>-->
                                    <el-select v-model="changeform.province" clearable size="small" placeholder="请选择省"
                                        @change="provinceChange($event)">
                                        <el-option v-for="item in provinceList" :key="item.name" :label="item.name"
                                            :value="item.name" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="地区" prop="area">
                                    <!-- <el-input v-model="changeform.area" autocomplete="off"></el-input> -->
                                    <el-select v-model="changeform.area" clearable size="small" placeholder="请选择市">
                                        <el-option v-for="item in areaList" :key="item.name" :label="item.name"
                                            :value="item.name" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="生日" prop="birthday">
                                    <el-date-picker v-model="changeform.birthday" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="头像" prop="avatar">
                                    <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                        <img v-if="changeform.image" :src="changeform.image" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer-update">
                        <el-button @click="dialogFormVisible_update = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible_update = false; UpdateUser('changeform')">确
                            定</el-button>
                    </div>
                </el-dialog>
            </el-col>

            <el-col class="demo-form-inline">
                <el-form :inline="true" :model="formInline">
                    <el-form-item>
                        <el-input v-model="formInline.name" placeholder="昵称查询"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form></el-col>
        </el-row>
        <el-row style="width: 100%;height: 88%;">
            <el-table :data="tableData" height="250" style="width: 100%;height: 100%;" border>
                <el-table-column fixed="left" label="序号" width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="邮箱" width="250">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.email }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>姓名: {{ scope.row.name }}</p>
                            <p>头像: <el-avatar :src="scope.row.image"></el-avatar></p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.username }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="性别" width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.gender == 0 ? '男' : '女' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="省份" width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.province }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="地区" width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.area }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="生日" width="200">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.birthday }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="邮编" width="220">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.emailcode }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini"
                            @click="handleEdit(scope.$index, scope.row); dialogFormVisible_update = true; changeform.image = ''">编辑</el-button>

                        <el-button size="mini" type="danger" style="position: relative; left: 10%;"
                            @click="handleDelete(scope.$index, scope.row); dialogVisible = true">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="currentPageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="currentTotal">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import user from "@/utils/user"
export default {
    data() {
        var checkEmail = (rule, value, callback) => {
            const regEmail = /^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/;
            if (value === '') {
                callback(new Error('邮箱不能为空'));
            } else if (regEmail.test(value)) {
                callback();
            } else {
                callback(new Error("请输入合法邮箱"));
            }
        };
        return {
            dialogVisible: false,
            dialogFormVisible_update: false,
            dialogFormVisible_new: false,
            uploadUrl: "http://localhost:8080/upload",
            /* 省表 */
            provinceList: [],
            /* 市表 */
            areaList: [],
            /* 全部城市 */
            AREA: [],
            /* 信息修改表单 */
            updateform: {
                username: '',
                name: '',
                gender: '',
                email: '',
                province: '',
                area: '',
                birthday: '',
                image: '',
                emailcode: ''
            },
            changeform: {
                id: '',
                username: '',
                name: '',
                gender: '',
                email: '',
                province: '',
                area: '',
                birthday: '',
                image: '',
                emailcode: ''
            },
            formInline: {
                name: '',
            },
            currentPage: 1,
            currentTotal: 100,
            currentPageSize: 10,
            tableData: [],
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                email: [
                    { validator: checkEmail, trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                gender: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                province: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                area: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                birthday: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                emailcode: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
            this.changeform.id = row.id;
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.changeform.id = row.id;
        },
        handleSizeChange(val) {
            this.currentPageSize = val;
            this.pageShow(this.currentPage, this.currentPageSize, this.formInline.name)
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.pageShow(this.currentPage, this.currentPageSize, this.formInline.name)
        },
        onSubmit() {
            this.currentPage = 1;
            this.pageShow(this.currentPage, this.currentPageSize, this.formInline.name)
        },
        beforeAvatarUpload() {
        },
        handleAvatarSuccess(res) {
            this.updateform.image = res.data;
            this.changeform.image = res.data;
        },
        handleClose() {

        },
        pageShow(page, pageSize, name) {
            let userInfo = {
                page: page,
                pageSize: pageSize,
                name: name
            }

            user.get(userInfo).then(res => {
                if (res.data.code === 1) {
                    this.currentTotal = res.data.data.total;
                    this.tableData = res.data.data.rows;
                    console.log(res.message);
                }
                else {
                    alert(res.data.msg);
                    console.log(res.message);
                }

            }).catch(e => {
                alert('出现错误请联系管理员!');
                console.log(e.message);
            })
        },
        newUser(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let userInfo = {
                        username: this.updateform.username,
                        name: this.updateform.name,
                        gender: this.updateform.gender,
                        email: this.updateform.email,
                        province: this.updateform.province,
                        area: this.updateform.area,
                        birthday: this.updateform.birthday,
                        image: this.updateform.image,
                        emailcode: this.updateform.emailcode
                    }

                    user.newUser(userInfo).then(res => {
                        if (res.data.code === 1) {
                            alert('添加成功!');
                            this.pageShow(this.currentPage, this.currentPageSize, this.formInline.name);
                            console.log(res.data.msg);
                        }
                        else {
                            alert(res.data.msg);
                            console.log(res.data.msg);
                        }
                    }).catch(e => {
                        alert('用户名已存在!');
                        console.log(e.message);
                    })
                } else {
                    alert('信息不全，添加失败');
                    console.log('添加失败!!');
                    return false;
                }
            });
        },
        UpdateUser(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let userInfo = {
                        id: this.changeform.id,
                        username: this.changeform.username,
                        name: this.changeform.name,
                        gender: this.changeform.gender,
                        email: this.changeform.email,
                        province: this.changeform.province,
                        area: this.changeform.area,
                        birthday: this.changeform.birthday,
                        image: this.changeform.image,
                        emailcode: this.changeform.emailcode
                    }

                    user.changeUser(userInfo).then(res => {
                        if (res.data.code === 1) {
                            alert('修改成功!');
                            console.log(res.data.msg);
                            this.pageShow(this.currentPage, this.currentPageSize, this.formInline.name);
                        }
                        else {
                            alert(res.data.msg);
                            console.log(res.data.msg);
                        }
                    }).catch(e => {
                        alert('用户名不存在!');
                        console.log(e.message);
                    })
                } else {
                    console.log('修改失败!!');
                    return false;
                }
            });
        },
        deleteUser() {
            user.deleteUser(this.changeform.id).then(res => {
                if (res.data.code === 1) {
                    alert('删除成功!');
                    console.log(res.data.msg);
                    if (this.currentTotal % this.currentPageSize === 1 && this.currentPage === this.currentTotal / this.currentPageSize + 1) {
                        this.currentPage = this.currentPage - 1;
                    }
                    this.pageShow(this.currentPage, this.currentPageSize, this.formInline.name);
                }
                else {
                    alert(res.data.msg);
                    console.log(res.data.msg);
                }
            }).catch(e => {
                alert('用户名不存在!');
                console.log(e.message);
            })
            //this.pageShow(this.currentPage, this.currentPageSize, this.formInline.name);
        },
        getCityList() {
            let cityInfo = {
                key: "3ffa003cf456716fae4aac23bffaf4b3", // 在高德开放平台申请的个人key密钥
                keyWords: "中国",
                subdistrict: 2    // 要获取的行政区划的级别：省、市、县三级
            }
            user.getCityList(cityInfo).then(res => {
                this.provinceList = res.data.districts[0].districts;/* 省 */
                const newProvince = this.provinceList;
                for (let i = 0; i < newProvince.length; i++) { /* 省级*/
                    for (let j = 0; j < newProvince[i].districts.length; j++) { /* 市级*/
                        const city = newProvince[i].districts[j].name
                        this.AREA.push({ id: j + 1, name: city, code: i + 1 })
                    }
                }

                for (let m = 0; m < newProvince.length; m++) {
                    newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } }
                }
                this.provinceList = newProvince

            })
        },
        provinceChange(that) {
            // 根据选中省，匹配市
            let cityCode = 0
            console.log(that);
            this.provinceList.forEach((item) => {
                if (item.name === that) {
                    cityCode = item.code;
                }
            })
            console.log(cityCode);
            if (cityCode) {
                /* 置空 */
                console.log(cityCode);
                this.areaList = [];
                this.AREA.forEach((item) => {
                    if (item.code === cityCode) {
                        this.areaList.push(item)
                    }
                }) /* 市匹配成功*/
            }
        },

    },
    mounted() {
        this.pageShow(this.currentPage, this.currentPageSize, '');
        this.getCityList();
    }
}
</script>

<style>
@import url('../css/user.css');
</style>